<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>小组作业</title>
  <link rel="stylesheet" href="https://cdn.staticfile.net/font-awesome/4.7.0/css/font-awesome.css" />
  <link href="css/bootstrap-4.3.1.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="css/comm.css" />
  <link rel="stylesheet" href="css/home.css" />
  <style>  
    .share-container {  
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
        flex-direction: row;
        flex-wrap: wrap;
    }  
  
    .share-btn {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
        width: 300px;  
        height: 300px;  
        border-radius: 50%;  
        background-color: #fff;  
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);  
        margin: 0 10px;  
        cursor: pointer;  
        position: relative;  
        overflow: hidden;  
    }  
  
    .share-btn img {  
        width: 60%;  
    }  
  
    .share-btn span {  
        font-size: 12px;  
        color: #666;  
        text-align: center;  
        width: 100%;  
        position: absolute;  
        bottom: 10px;  
    }  
  
    .share-btn:hover {  
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);  
    }  
</style>
</head>

<body>
  <div class="j-nav" id="top">
    <div class="logo-img">
      <img src="images/logo.png" width="100%" height="100%" alt="" />
    </div>
    <ul class="nav-list j-sm-display-none">
      <li><a href="index.html">首页</a></li>
      <!-- <li><a href="tank.html">作品</a></li> -->
      <li class="drowdown">小组作业
		<div class="drowdown-box">
        <p><span class="font-weight-bold">组员作业：</span><span><a href="">黄明杰</a></span><span><a href="">成员姓名</a></span><span><a href="">成员姓名</a></span><span><a href="">成员姓名</a></span><span><a href="">成员姓名</a></span></p>
			<p><span class="font-weight-bold">其他：</span><span><a href="tank.html">坦克小游戏</a></span><span><a href="https://gitee.com/cvscloud/xiaozu-kaifa">小组作业码云仓库</a></span></p>
      </div>
		</li>
      
      <li><a href="zhang.html" target="_blank">分享</a></li>
      <li><a href="https://gitee.com/cvscloud/xiaozu-kaifa">码云</a></li>
      <li><a href="about.html">关于</a></li>
    </ul>
    <div class="nav-form j-flex j-sm-display-none">
      <input type="text" />
      <button>搜索</button>
    </div>
    <div class="open-side j-displaynone float-right" style="cursor: pointer">
      <i class="fa fa-list" style="font-size: 30px; color: white; padding: 18px; display: block"></i>
      <i class="fa fa-align-justify" style="font-size: 30px; color: white; padding: 18px; display: none"></i>
    </div>
  </div>
  <div class="main-mask"></div>
  <div class="nav-side">
    <div class="sm-nav-form j-flex">
      <input type="text" />
      <button>搜索</button>
    </div>
    <ul class="sm-nav-list">
      <li>个人作业</li>
		<div class="drowdown-box">
			
		</div>
      <li><a href="tank.html">作品</a></li>
      <li><a href="zhang.html" target="_blank">分享</a></li>
      <li><a href="https://gitee.com/cvscloud/xiaozu-kaifa">码云</a></li>
      <li><a href="about.html">关于</a></li>
    </ul>
  </div>
  <div class="main-img">
		<video autoplay muted loop id="video-bg">  
		  <source src="https://cn-sy1.rains3.com/akatest/video/20240501_164615.mp4" type="video/mp4">   
		</video>
		<div class="img-mask">
			<div style="height: 100%;width: 100%" class="j-flex j-align-items-center j-justify-content-center textbox">
				<div class="img-text">
					<h1 class="text-center text-light main-title" style="letter-spacing: 0.2em;">WEB与信息时代</h1>
					<div class="dropdown-divider" style="background-color: orange;width: 250px;margin:15px auto;height: 5px;border-radius: 10px"></div>
					<p style="color: white;margin-top: 40px">Web时代的意义和前景是广泛而深远的，它改变了人们的生活方式、工作方式，甚至思维方式。<br>The significance and prospects of the Web era are broad and far-reaching, and it has changed the way people live, work, and even think.</p>
					<a href="#title" style="float:right;color: white;text-decoration: none" class="font-weight-bold">了解更多&nbsp;<i class="fa fa-angle-double-right" style="font-size:20px"></i></a>
				</div>
			</div>
		</div>
	</div>
  <div class="container j-mt70 an" id="title" style="opacity: 0">
    <div class="share-container">  
        <div class="share-btn" onclick="alert('暂时不支持直接分享到QQ，请手动操作。')">  
            <img src="images/QQlogo.jpg" alt="QQ图标" >  
            <span>分享到QQ</span>  
        </div>  
        <div class="share-btn" onclick="alert('暂时不支持直接分享到微信，请手动操作。')" >  
            <img src="images/th.jpg" alt="微信图标">  
            <span>分享到微信</span>  
        </div>  
    </div>
  </div>
  <div class="j-container" style="margin-top: 100px">
    <h3 class="text-center" id="title2">Web开发技术</h3>
    <div class="dropdown-divider" style="
          background-color: orange;
          width: 190px;
          margin: auto;
          height: 5px;
          border-radius: 10px;
        "></div>
    <div class="mt-4 j-flex j-justify-content-around">
      <div class="skill-box">
        <a href="https://cn.vuejs.org/" target="_blank">
          <img src="images/skillpng.png" width="100%" height="auto" alt="" />
        </a>
        <h5 class="text-center mt-3">Vue</h5>
        <p>Vue是一套构建用户界面的渐进式框架。</p>
      </div>
      <div class="skill-box">
        <a href="https://www.runoob.com/" target="_blank">
          <img src="images/pic_html5.png" width="100%" height="auto" alt="" />
        </a>
        <h5 class="text-center mt-3">H5</h5>
        <p>
          三剑客的分工<br />
          HTML：负责网页的架构；<br />
          CSS：负责网页的样式，美化；<br />
          JavaScript（JS）：负责网页的行为
        </p>
      </div>
      <div class="skill-box">
        <a href="https://nodejs.org/en" target="_blank">
          <img src="images/node-js-logo.png" width="100%" height="auto" alt="" />
        </a>
        <h5 class="text-center mt-3">Node.js</h5>
        <p>
          一个基于JavaScript运行的服务器端平台，用于构建高效的、可扩展的Web应用。Node.js通常与Express框架一起使用。
        </p>
      </div>
      <div class="skill-box">
        <a href="tank.html" target="_blank">
          <img src="Tank\img\tU.gif" width="100%" height="auto" alt="" style="border-radius: 100% 100%" />
        </a>
        <h5 class="text-center mt-3">坦克大战</h5>
        <p>一个H5小游戏,Web的魅力。</p>
      </div>
    </div>
  </div>
	<div class="j-container" style="margin-top: 70px">
		<h3 class="text-center">小组作业讲解</h3>
		<div class="dropdown-divider" style="
			  background-color: orange;
			  width: 190px;
			  margin: auto;
			  height: 5px;
			  border-radius: 10px;
			"></div>
      <div class="j-flex j-justify-content-around">
        <div class="footer-end">
          <video src="#" controls width="100%" height="180px"></video>
        </div>
        <div class="footer-end">
          <ul>
            <li>本作品采用flex和响应式布局</li>
			  <li>添加了一些交互效果</li>
            <li>对pc和移动端友好</li>
            <li>...</li>
          </ul>
        </div>
      </div>
	</div>
  <div class="footer j-mt70" style="margin-top: 100px">
    <div class="j-container j-flex j-justify-content-around mt-5">
      <div class="footer-sharp">
        <p class="text-center text-light" style="font-size: 1rem">交流一下</p>
        <input type="text" class="inp-sharp" placeholder="输入您的用户名" style="height: 30px" />
        <textarea type="text" class="inp-sharp" placeholder="分享一下您的想法"
          style="height: 100px; margin-top: 10px"></textarea>
        <button>提交</button>
      </div>
      <div class="footer-text">
		  <p class="text-center text-light" style="font-size: 1rem">友情链接</p>
		  <div class="j-flex j-justify-content-center footer-links">
			  <span><a href="https://www.bilibili.com/">B站</a></span>
		  	<span><a href="https://www.runoob.com/">菜鸟教程</a></span>
		  	<span><a href="https://www.w3school.com.cn/">w3school</a></span>
		  	<span><a href="https://gitee.com/cvscloud/xiaozu-kaifa">小组码云仓库</a></span>
			  <span><a href="https://codelover.club/curr/42">数字化成长空间</a></span>
		  </div>
		  <p class="text-center text-light mt-4" style="font-size: 1rem">联系我们</p>
		  <ul class="footer-info" style="list-style-type: none;width: 100%">
		  	<li><i class="fa fa-envelope-o"></i> 电话：130XXXXXXXX</li>
		  	<li><i class="fa fa-envelope-o"></i> 邮箱：XXXXXXXX@163.com</li>
		  	<li><i class="fa fa-envelope-o"></i> 地址：XXXXXXXX</li>
		  </ul>
      </div>
    </div>
    <p class="text-center p-2" style="margin: 0;color: rgba(205,205,205,1.00);font-size: .7rem">源于 顺职2班第一组 开发设计</p>
  </div>
  <div class="sidebar-open j-flex j-justify-content-center j-align-items-center" style="opacity: 0">
    <a href="#" class="fa fa-chevron-up" style="font-size: 20px; color: white; text-decoration: none"></a>
  </div>
  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap-4.3.1.js"></script>
  <script src="js/home.js"></script>
</body>

</html>